<template>
  <!-- 学习记录 -->
  <div>
    <el-card class="box">
      <div class="record-container">
        <div class="record-date" v-for="(dateRecords, date) in groupedRecords" :key="date">
          <h3>{{ convertDate(date) }}</h3>
          <div class="record-list">
            <div v-for="record in dateRecords" :key="record.id" class="record-item">
              <div class="record-time">{{ getTime(record.time) }}</div>
              <div class="div4-2-1">
                <div class="div4-2-1-1">
                  <img class="img1" :src="'http://101.43.223.224:8765/image/getImageById?id='+record.imageId"/>
                </div>
              </div>
              <div class="record-name">{{ record.courseTitle }}</div>
              <div class="div1">
                <div class="div2">
                  <img class="img2" :src="'http://101.43.223.224:8765/image/getImageById?id='+record.teacherImageId" />
                </div>
                <p class="p1">
                  <span class="span1">{{ record.tname }}</span>
                  <span class="span3">{{ record.subjectType }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LearningRecord',
  data() {
    return {
      // 学习记录数据
      learningRecords: []
        // {
        //   id:1,
        //   time: '2023-06-27 21:00:35',
        //   courseTitle: '标题',
        //   tname: '老师',
        //   subjectType: 'Java'
        // }
    };
  },
  computed: {
    // 根据日期分组
    groupedRecords() {
      const grouped = {};
      for (const record of this.learningRecords) {
        const date = this.getDate(record.time);
        if (!grouped[date]) {
          grouped[date] = [];
        }
        grouped[date].push(record);
      }
      return grouped;
    }
  },
  mounted () {
    // 根据用户id和收藏类型查询数据
    this.selectLearningRecordDTOByUserId()
  },
  methods: {
    // 根据用户id和收藏类型查询数据
    selectLearningRecordDTOByUserId () {
      this.$axios.get('/learningRecord/selectLearningRecordDTOByUserId',
          {
            params: {
              userId: window.sessionStorage.getItem('userId')
            }
          } 
        ).then(res => {
            if(res.data.flag){
                this.learningRecords = res.data.data
                console.log(this.tableData)
                this.message('success', '获取学习记录成功')
            }else{
                this.message('error', '获取学习记录失败,请重新登录')
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 分隔日期和时间
    getDate(datetime) {
      return datetime.split(' ')[0];
    },
    // 时间格式化
    getTime(datetime) {
      // const currentDate = new Date();
      const recordDate = new Date(datetime);
      // 返回具体时间
      const hours = String(recordDate.getHours()).padStart(2, '0');
      const minutes = String(recordDate.getMinutes()).padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    // 日期格式化
    convertDate(date) {
      const currentDate = new Date();
      const recordDate = new Date(date);
      // 判断日期是否为今天
      if (
        recordDate.getDate() === currentDate.getDate() &&
        recordDate.getMonth() === currentDate.getMonth() &&
        recordDate.getFullYear() === currentDate.getFullYear()
      ) {
        return '今天';
      }

      // 判断日期是否为昨天
      const yesterday = new Date();
      yesterday.setDate(currentDate.getDate() - 1);
      if (
        recordDate.getDate() === yesterday.getDate() &&
        recordDate.getMonth() === yesterday.getMonth() &&
        recordDate.getFullYear() === yesterday.getFullYear()
      ) {
        return '昨天';
      }

      // 其他日期返回原始日期
      return date;
    }
  }
};
</script>

<style scoped>
.learning-record {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #486da3;
}
.box {
    width: 900px;
    margin: 0 auto;
  }

.record-container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.record-date {
  margin-bottom: 20px;

}

.record-list {
  border-left: 2px solid #ebeef5;
  padding-left: 10px;
}

.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.record-time {
  font-size: 14px;
  margin-right: 10px;
  color: #999;
}

.record-name {
  font-size: 14px;
  color: #333;
  margin-left: 10px;
  text-align: left;
  margin-top: 10px;
  width: 400px;
  height: 80px;
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.div4-2-1{
    width: 130px;
    height: 100px;
    float: left;
  }
  .div4-2-1-1 {
    width: 130px;
    height: 80px;
    margin: 0 auto;
    margin-top: 14px;
  }
.img1 {
    width: 100%;
    height: 100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  .div1 {
    width: 200px;
    height: 30px;
    float: right;
    margin-top: 66px;
    margin-right: 10px;
    position: relative;
  }
  .div2 {
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 8px;
  }
  .img2 {
    width: 100%;
    height: 100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius: 50%;
  }
  .div3{
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 8px;
    color: rgb(151,178,182);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .div4{
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 8px;
    color: rgb(151,178,182);
    text-align: left;
  }
  .p1 {
    width: 140px;
    height: 30px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 8px;
    color: rgb(151,178,182);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .span1{
    float: left;
    height: 30px;
    margin-left: 6px;
    margin-top: 5px;
    font-size: 8px;
    color: rgb(151,178,182);
    text-align: left;
    overflow: hidden;
    /* display: inline-block; */
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .span3{
    width: 50px;
    height: 20px;
    float: left;
    margin-left: 10px;
    margin-top: 4px;
    font-size: 6px;
    color: rgb(151,178,182);
    border-left: 1px solid #000;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px;
    border-left: 1px solid #e5e9ef;
  }
</style>
